<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		nameData=[];
		valueData=[];
		$.ajax({
			url: "event.json",
			async: false,//改为同步方式
			type: "GET",
		//	data: { arg: val },
			success: function (data) {
				$(data.data).each(function(index,item){
					nameData.push(
//						value: item.count,
						item.name
					);
					valueData.push(
						item.count
//						name: item.name
					);			
	
					
				})
			}
		});
        var option = {
            title: {
//              text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['网络扫描','网络入侵','注入攻击','口令猜解','拒绝服务攻击','违规行为	','僵木蠕病'	,'异常行为','恶意文件']
            },
            xAxis: {
            	show:false,  
				data:nameData
            },
            yAxis: {},
            series: [
            {
				type:'bar',
				data:valueData,
//				name:nameData,
				itemStyle: {
	                normal: {
	                    color: function(params) {
	                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', 
	                        	'#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074'
	                        ];
	                        return colorList[params.dataIndex]
	                    }
	                }
            	}
            },
//			{
//          	type: 'bar',
//          	data:valueData,
//          	name:nameData[0],
////          	itemStyle:{
////          		normal:{
////          			color:'#c23531'
////          		}
////          	}
//          },{
//          	type: 'bar',
//          	data:valueData  ,
//          	name:nameData[1],
////          	itemStyle:{
////          		normal:{
////          			color:'#2f4554'
////          		}
////          	}
//          },
            ]
        };
		
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
    </script>
</body>
</html>